import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '300px',
  },
  text: {
    fontSize: '1.2em',
  },
});

interface IProps {}

const OpeningSoon: React.FC<IProps> = props => {
  const classes = useStyles();

  return (
    <div className={clsx(classes.root)}>
      <img
        className={clsx(classes.image)}
        src="//10miaomiao.cn/images/zn_opening.jpg"
        alt="施工中"
      />
      <Typography className={clsx(classes.text)} variant="overline">
        施工中，敬请期待
      </Typography>
    </div>
  );
};

export default OpeningSoon;
